<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>作品集</title>
    <style>

    </style>
    <link rel="stylesheet" href="./icon_font/iconfont.css">
    <link rel="stylesheet" href="./index.css">
    
</head>

<body>
    <canvas id="canvas"></canvas>
    <div class="container">
        <div class="wrapper clearfix">
            <ul class="nav-con">
                <li class="nav-item">
                    <p class="title">项目<i class="down icon-xiangxia"></i></p>
                    <ul class="sub-nav">
                        <li class="sub-item">
                            <a href="http://longteng33.gitee.io/shopping-web_xiaomi" target="_blank">小米商城网站</a>
                            <div>
                                <p>
                                    使用vue搭建的小米商城网站系统，包含登录页面，主页，商品详情页，购物车页面，提交订单页面，结算页。
                                </p>
                                <p>
                                    实现的主要功能有：自动登录、跳转商品详情页，选择商品型号，添加购物车，购物车增减，购物车勾选，选中数量于金额同步更新，修改收获地址，添加收获地址等。<br>
                                </p>
                                <a href="https://gitee.com/longteng33/shopping-web_xiaomi" target="_blank">码云地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="http://longteng33.gitee.io/shop_management" target="_blank">后台管理系统</a>
                            <div>
                                <p>使用vue和element搭建的电商后台管理系统，因无服务器，使用本地数据，假登录</p>
                                <p>主要的功能有：自动登录，用户管理、权限管理、数据统计</p>
                                <a href="https://gitee.com/longteng33/shop_management" target="_blank">码云地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="http://longteng33.gitee.io/react_shop" target="_blank">react商品展示小项目</a>
                            <div>
                                <p>使用react搭建的</p>
                                <p>主要的功能有：商品列表展示、商品详情，路由切换</p>
                                <a href="https://gitee.com/longteng33/react_shop" target="_blank">码云地址</a>
                            </div>
                        </li>
                        
                        <li class="sub-item">
                            <a href="http://longteng33.gitee.io/music-player_vue" target="_blank">音乐播放器_vue构建</a>
                            <div>
                                <p>1、右边栏宽度固定，左边栏自适应，底部控制栏宽度自适应，固定在底部但水平方向能够居中；<br>
                                    2、播放控制栏，包括播放/暂停键，上/下首按钮，实时进度条，进度条点击、进度条拖动、歌曲当前事件与总时间显示，音量键/静音，音量条拖动，音量条点击；<br>
                                    3、进度条宽度根据屏幕宽度自适应，当进度条总长度变化后，实时进度也能按比例变化，以正确显示当前的播放位置；<br>
                                    4、CD图案根据歌曲播放暂停而旋转，点击CD实现播放/暂停；<br>
                                    5、标题显示当前播放歌曲，使用css的animation实现走马灯效果，暂停时停止动画效果；<br>
                                    6、动画切换页面效果；<br>
                                    7、实现了一个搜索框，使用jsonp跨域获取qq音乐的搜 索关键字结果，并展示在展示栏中；<br>
                                    8、歌曲播放列表；<br>
                                    9、hover时当前栏高亮，显示播放键和删除键；<br>
                                    9、双击、点击播放键实现播放/暂停，播放时显示svg小图标；<br>
                                    10、删除功能；<br>
                                    11、改变自定义的滚动条样式，隐藏页面的滚动条，但用鼠标还能滚动页面；<br>
                                    12、改变element组件的样式；</p>
                                <a href="https://gitee.com/longteng33/music-player_vue" target="_blank">码云地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/musicPlayer/" target="_blank">音乐播放器_使用jQuery</a>
                            <div>
                                <p>1.实现音乐播放/暂停功能<br> 
                                    2.拖拽进度条调节进度<br> 
                                    3.拖拽音量条调节音量<br> 
                                    4.使用animation实现cd图案转动，暂停时停止转动<br> 
                                    5.上一首和下一首切换<br> 
                                    6.歌曲名循环移动<br>
                                    7.歌曲总时间和歌曲实时时间</p>
                                <a href="https://github.com/longteng33/musicPlayer" target="_blank">github地址</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <p class="title">页面<i class="down icon-xiangxia"></i></p>
                    <ul class="sub-nav">
                        <li class="sub-item">
                            <a href="http://longteng33.gitee.io/mukewang" target="_blank">慕课网首页仿写</a>
                            <div>
                                <p>滚动页面出现返回顶部图标，hover时出现二维码，页面变窄时顶部栏动态变化，及一些hover时的动态菜单效果</p>
                                <a href="https://gitee.com/longteng33/mukewang" target="_blank">码云地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="http://longteng33.gitee.io/coffee" target="_blank">响应式某咖啡官网首页</a>
                            <div>
                                <p>根据屏幕宽度不同，展现不同的页面布局。使用animate.css动画库添加一些图标的动效</p>
                                <a href="https://gitee.com/longteng33/coffee" target="_blank">码云地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/qiantuwang/" target="_blank">千图网首页仿写</a>
                            <div>
                                <p>使用html和css布局，较好地还远了原页面，包含一些动态的切换效果</p>
                                <a href="https://github.com/longteng33/qiantuwang" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/xiaomi_seckill" target="_blank">小米闪购页面仿写</a>
                            <div>
                                <p>参照小米闪购网站，使用html和css仿写的页面，包含一些简单的效果，包括商品栏切换，菜单栏固定等</p>
                                <a href="https://github.com/longteng33/xiaomi_seckill" target="_blank">github地址</a>
                            </div>
                        </li>
                       
                    </ul>
                </li>
    
    
                <li class="nav-item">
                    <p class="title">HTML5和CSS3<i class="down icon-xiangxia"></i></p>
                    <ul class="sub-nav">
                        <li class="sub-item">
                            <a href="http://longteng33.gitee.io/nav_bycss" target="_blank">不用js实现的动态切换菜单</a>
                            <div>
                                <p>label标签的for属性，label的for的属性值与input的id属性值相同，这两个元素被绑定绑定，点击label标签就相当于点击了input框</p>
                                <a href="https://gitee.com/longteng33/nav_bycss" target="_blank">码云地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/cube_animation" target="_blank">css3动画-旋转的立方体</a>
                            <div>
                                <p>对6个元素使用transform属性，拼出一个立方体。立方体旋转有3d效果</p>
                                <a href="https://github.com/longteng33/cube_animation" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/icon_svg" target="_blank">svg图标</a>
                            <div>
                                <p>使用svg制作的icon动态图标</p>
                                <a href="https://github.com/longteng33/icon_svg" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/animation_nav" target="_blank">动画菜单1</a>
                            <div>
                                <p>鼠标hover菜单时，给菜单文字添加一种动态效果</p>
                                <a href="https://github.com/longteng33/animation_nav" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/animation_nav_2" target="_blank">动画菜单2</a>
                            <div>
                                <p>用animation和js制作的动画菜单，鼠标从哪个方向进入，文字就从哪个方向进入；鼠标从哪个方向离开，文字就从哪个方向离开；</p>
                                <a href="https://github.com/longteng33/animation_nav_2" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/animation_nav_3/" target="_blank">动画菜单3</a>
                            <div>
                                <p>使用css3动画制作，鼠标hover每张卡片时，有“站出来”效果</p>
                                <a href="https://github.com/longteng33/animation_nav_3" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/scratchCard" target="_blank">canvas制作的刮刮卡</a>
                            <div>
                                <p>用canvas制作的刮刮卡，当刮卡的部分超过50%时，自动清除所有的刮层。点击再来一次重新刮奖</p>
                                <a href="https://github.com/longteng33/scratchCard" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/barrage" target="_blank">实现弹幕效果</a>
                            <div>
                                <p>1、使用计时器改变弹幕元素的样式的left值，实现弹幕从右到左的效果；</p>
                                <p>2、弹幕滑出屏幕后从dom中移除；</p>
                                <p>3、弹幕在屏幕上的垂直位置，由随机数产生在不同的滑道上面</p>
                                <a href="https://github.com/longteng33/barrage" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/clock/" target="_blank">css3指针钟表盘</a>
                            <div>
                                <p>动态添加刻度，刻度是按角度旋转的，数字还是正的</p>
                                <p>使用requestAnimationFrame做动画，浏览器刷新时自动执行，无需设置时间间隔。屏幕每次刷新时执行回调函数</p>
                                <a href="https://github.com/longteng33/clock" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/trainTicket" target="_blank">火车票购票城市选取</a>
                            <div>
                                <p>点击城市可选择城市</p>
                                <p>点击交换按钮呼唤两个城市的位置，交换按钮旋转效果</p>
                                <a href="https://github.com/longteng33/trainTicket" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/carousel-pointer/" target="_blank">带焦点框的轮播图</a>
                            <div>
                                <p>使用css3的transform属性改变焦点框，渐变切换通过transition-property: opacity改变透明度实现</p>
                                <a href="https://github.com/longteng33/carousel-pointer" target="_blank">github地址</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <p class="title">Javascript<i class="down icon-xiangxia"></i></p>
                    <ul class="sub-nav">
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/associationWord_jsonp" target="_blank">淘宝搜索框(jsonp跨域)</a>
                            <div>
                                <p>使用淘宝接口，jsonp跨域实现的联想词搜索框</p>
                                <p>利用script标签的src属性不受同源策略限制和script标签自执行的特点</p>
                                <p>输入关键字时向淘宝的接口发送请求，返回数据插入到dom中</p>
                                <a href="https://github.com/longteng33/associationWord_jsonp" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://github.com/longteng33/Ajax" target="_blank">JS封装Ajax函数</a>
                            <div>
                                <p>创建ajax对象</p>
                                <p>初始化http请求参数</p>
                                <p>发送请求</p>
                                <p>监控数据，检查数据，使用数据</p>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/generate_grid" target="_blank">用js生成指定要求的格子</a>
                            <div>
                                <p>使用原生js实现输入1-100的行数和列数，会生成对应数量的格子，并且填充被打乱的数字，同时，每个格子的颜色同它四周的颜色不一样</p>
                                <a href="https://github.com/longteng33/generate_grid" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/carousel-JS/" target="_blank">原生js封装的轮播图</a>
                            <div>
                                <p>使用原生js实现，可以让格子按指定的路径转动，实现前中后转速不一样，抽奖后展示奖品和中将者</p>
                                <a href="https://github.com/longteng33/carousel-JS" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/lottery/" target="_blank">转盘抽奖</a>
                            <div>
                                <p>使用原生js封装，点击上下按钮切换，小圆点列表切换，自动轮播，切换时渐变效果</p>
                                <a href="https://github.com/longteng33/lottery" target="_blank">github地址</a>
                            </div>
                        </li>
                    </ul>
                </li>
    
                <li class="nav-item">
                    <p class="title">实用插件<i class="down icon-xiangxia"></i></p>
                    <ul class="sub-nav">
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/dragFile" target="_blank">拖拽上传文件插件</a>
                            <div>
                                <p>结合Drag、Drop、FileReader实现拖拽文件进行上传，并且进度条显示上传进度。</p>
                                <a href="https://github.com/longteng33/dragFile" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/pagination/" target="_blank">分页插件</a>
                            <div>
                                <p>用jQuery封装的分页插件</p>
                                <p>当页面是第一页时，前一页显示不可点击；当页面是最后一页时，后一页显示不可点击。</p>
                                <p>当页数是在中间部分是，显示出省略号</p>
                                <p>始终是9个格子的长度</p>
                                <a href="https://github.com/longteng33/pagination" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/evaluate_star" target="_blank">打星评级插件</a>
                            <div>
                                <p>用原生js封装的评价插件，鼠标移动点亮星星，点击进行评价，显示评价语言。</p>
                                <a href="https://github.com/longteng33/evaluate_star" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://github.com/longteng33/03China-city-select" target="_blank">全国三级城市联动选择</a>
                            <div>
                                <p>用JS封装的全国三级城市联动选择</p>
                                <p>选择省自动切换其下的市及区，选择市自动切换其下的区</p>
                                <a href="https://longteng33.github.io/03China-city-select/" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/dragEle" target="_blank">拖拽元素并自动推动滚动条</a>
                            <div>
                                <p>使用原生js封装的拖拽插件，当拖动到边界处的时候，如果页面含有滚动条，会自动滚动滚动条</p>
                                <p>用getboundingClientrect方法判断元素距离屏幕边界的距离</p>
                                <a href="https://github.com/longteng33/dragEle" target="_blank">github地址</a>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/carousel-jquery/" target="_blank">jQuery封装的轮播图</a>
                            <div>
                                <p>使用jQuery封装的轮播图插件，含有上下点击减，每个图片对应的小圆点，自动轮播</p>
                                <p>自定义输入轮播对象，轮播事件，封装实现复用</p>
                                <a href="https://github.com/longteng33/carousel-jquery" target="_blank">github地址</a>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <p class="title">函数式编程<i class="down icon-xiangxia"></i></p>
                    <ul class="sub-nav">
                        <li class="sub-item">
                            <a href="https://github.com/longteng33/curry" target="_blank">函数柯里化</a>
                            <div>
                                <p>柯里化函数接收一个函数fa，运行后返回一个新的函数_fa，这个新的函数处理fa函数剩余的参数</p>
                                <p>原来fa(1,2,3),柯里化后这样运行fa(1)(2)(3)</p>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://github.com/longteng33/debounced" target="_blank">防抖函数</a>
                            <div>
                                <p>对于在事件触发n秒之后再执行的回调，延迟执行如果在这n秒之内再触发事件，重新开始计时</p>
                                <p>提供两种防抖，第一种只有第一次有用，第二种只有最后一次有用</p>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://github.com/longteng33/throttle" target="_blank">节流函数</a>
                            <div>
                                <p>不停地触发事件，也只会每隔n秒执行一次</p>
                                <p>例如不停地点击按钮，不管点多少次，1秒之内只会执行一次回调函数</p>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://github.com/longteng33/lazy_function" target="_blank">惰性函数</a>
                            <div>
                                <p>第一次执行的时候不仅返回值，而且在函数内部改变了自身，下次执行的时候就执行这个被改变的新函数了</p>
                                <p>例如现有一个函数，用来获取某时刻的时间，以后调用该函数，都返回第一次调用时的时间</p>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://github.com/longteng33/memorize" target="_blank">记忆函数</a>
                            <div>
                                <p>一些数据需要频繁地去调用，所以可以将他们放到缓存池中，需要用的时候直接取就可以了</p>
                                <p>例如计算阶乘</p>
                            </div>
                        </li>
                        <li class="sub-item">
                            <a href="https://github.com/longteng33/sortDatas" target="_blank">数据归类函数</a>
                            <div>
                                <p>将一组形如下面的数据：
                                    [{id:1,name:"xiaoming",sex:2},<br>
                                    {id:2,name:"bytr",sex:1},<br>
                                    {id:3,name:"try",sex:1}]<br>
                                    按对象中的某属性归类，比如按sex归类</p>
                            </div>
                        </li>
                    </ul>
                </li>
                <li class="nav-item">
                    <p class="title">其它练习<i class="down icon-xiangxia"></i></p>
                    <ul class="sub-nav">
                        <li class="sub-item">
                            <a href="https://longteng33.github.io/carousel-vue/" target="_blank">vue动画</a>
                            <div>
                                <p>用vue动画做的轮播图</p>
                                <p>用transition-group标签包裹列表，实现列表的过渡</p>
                                <p>六个钩子函数实现动画</p>
                                <a href="https://github.com/longteng33/carousel-vue" target="_blank">github地址</a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="des">
    
            </div>
        </div>
    </div>
    



    <script src="./jquery-3.4.1.min.js"></script>
    <script src="./accordion.js"></script>
    <script src="./particle.js"></script>
    <script>

        new Accordion({
            navTitle: $(".nav-con .nav-item .title"),
            subNav: $(".nav-con .nav-item .sub-nav"),
            activeClassName: "active",
            multiple: true,//是否允许展开多个子菜单
        })

        $(".nav-con .sub-item a").mouseenter(function () {
            var $dom = $(this).next().clone();
            $(".wrapper .des").html('').html($dom);
            if ($(document).scrollTop() > $(".wrapper .des").offset().top) {
                $(".wrapper .des div").addClass("fixed")
            } else {
                $(".wrapper .des div").removeClass("fixed")
            }
        })

        window.onscroll = function () {
            if ($(document).scrollTop() > $(".wrapper .des").offset().top) {
                $(".wrapper .des div").addClass("fixed")
            } else {
                $(".wrapper .des div").removeClass("fixed")
            }
        }




        function coloring(color1, color2, color3, color4) {
            $(".nav-con .nav-item .title").css({ "background-color": color1, "color": color3 });
            $(".nav-con .sub-item a").css({ "background-color": color2, "color": color4 });
        }
        // coloring("#295aa6","#fead6b","#fead6b","#295aa6");
    </script>
</body>

</html>